<template>
	<view class="zxc_centent">
		<u-swiper :list="list1" radius="0" height="250"></u-swiper>
		<!-- end -->
		<view class="info_tp">
			<view class="info_tp_tit">
				古法推拿
			</view>
			<view class="info_cen">
				<view class="info_cen_left">
					<view class="money">￥219.00</view>
					<view class="time">
						<image src="../../static/images/time.png" mode="widthFix" class="time_img"></image>
						60分钟
					</view>
				</view>
				<navigator url="/pagesA/store/index" hover-class="none" class="info_cen_right">
					查看门店
				</navigator>
			</view>

			<view class="info_bt">
				<image src="../../static/images/cai4.png" mode="widthFix" class="cai_img"></image>
			</view>

		</view>
		<!-- end -->
		<view class="box">
			<view class="label">
				适用说明
			</view>
			<view class="ijc">
				<text class="ijc_left">性别限制</text>
				<text class="ijc_right">不限制</text>
			</view>
			<view class="ijc">
				<text class="ijc_left">适用人群</text>
				<text class="ijc_right">亚健康群体</text>
			</view>
		</view>
		<!-- end -->
		<view class="box">
			<view class="label">
				项目详情
			</view>
			<view style="margin-top:20upx;">
				<!-- 项目详情富文本 -->
				<u-parse :content="content"></u-parse>
			</view>
		</view>
		<!-- end -->

		<view class="jv">
			<view class="jv_sm" @click="open">
				选择技师
			</view>
		</view>

		<!-- pop -->
		<u-popup :show="show" @close="close" mode="center" :closeable="true">
			<view class="jishi_list">
				<!-- 技师循环开始 -->
				<view class="list" v-for="(item,index) in jishilist">
					<navigator class="list_left" hover-class="none" url="/pages/jishi/detail">
						<image :src="item.tou" class="list_img tou_img"></image>
						<!-- 										  <view style="border:2upx solid #07c160;padding:5upx 0;font-size:24upx;color:#07c160;text-align: center;" v-if="item.type ==0">在店技师</view>
										   <view style="border:2upx solid #07c160;padding:5upx 0;font-size:24upx;color:#07c160;text-align: center;" v-if="item.type ==1">兼职技师</view> -->
					</navigator>

					<view class="list_right">
						<view class="list_right_left">

							<view class="title">
								{{item.name}}
								<text class="yue_time">最早可约:{{item.time}}</text>
							</view>

							<view class="text">
								<view class="oks">
									<image src="../../static/images/start.png" mode="widthFix"
										style="width: 30upx;margin-right:5upx"></image>
									{{item.start}}星
									<view class="ikc">
										已服务：{{item.num}}单
									</view>
									<!-- 					<view class="ujc">
		  															<image src="../../static/images/ico-addr.png" mode="widthFix" style="width: 25upx;margin-right:5upx"></image>
		  																{{item.km}}
		  															</view> -->
								</view>
							</view>

							<view class="text">
								<view class="oks">
									<!-- 			<navigator class="ujc"  style="margin-left:0;" hover-class="none" url="/pages/store/index">
		  															<image src="../../static/images/shangjia.png" mode="widthFix" style="width: 30upx;margin-right:5upx"></image>
		  																{{item.store_name}}
		  															</navigator> -->
									<view class="ujc">
										<image src="../../static/images/mes.png" mode="widthFix"
											style="width: 30upx;margin-right:5upx"></image>
										{{item.pingjia}}
									</view>
									<view class="ujc">
										<image src="../../static/images/xin.png" mode="widthFix"
											style="width: 30upx;margin-right:5upx"></image>
										{{item.xin}}
									</view>
								</view>
							</view>

							<view class="text">
								<view class="jvb" @click="open2">
									立即预约
								</view>
							</view>

						</view>
					</view>
				</view>
				<!-- 技师循环结束 -->

			</view>
		</u-popup>

		<!-- pop 2 时间 -->
		<u-datetime-picker :show="show2" :closeOnClickOverlay="true" @close="close2" @cancel="close2"
			@confirm="confirmtime" :formatter="formatter" v-model="selecttime" mode="datetime"></u-datetime-picker>
		<!-- end -->

	</view>
</template>

<script>
	import SOtime from '@/uni_modules/fl-SOtime/SOtime.js'
	export default {
		data() {
			return {
				selecttime: Number(new Date()),
				suretime: '',
				list1: [{
					url: '/static/images/anmo.png'
				}, {
					url: '/static/images/anmo.png'
				}],
				content: `
					   					<img src="../../static/images/cai2.png" />
										<img src="../../static/images/cai3.png"/>
					   				`,
				show: false,
				show2: false,
				jishilist: [{
						tou: 'http://192.168.1.4:9000/hotel/2023/07/19/882b25156bff46a5957555ad63e1d6a7.png',
						name: '彩迷',
						type: 0, //0在店技师，1兼职技师
						time: '11:30',
						start: 5,
						num: 325,
						km: '3.2km',
						store_name: '夜空美美小店',
						pingjia: 65,
						xin: 32
					},
					{
						tou: 'http://192.168.1.4:9000/hotel/2023/07/19/882b25156bff46a5957555ad63e1d6a7.png',
						name: '彩迷',
						time: '11:30',
						type: 1, //0在店技师，1兼职技师
						start: 5,
						num: 325,
						km: '3.2km',
						store_name: '夜空美美小店',
						pingjia: 65,
						xin: 32
					}
				]
			}
		},
		methods: {
			open() {
				this.show = true
			},
			close() {
				this.show = false
			},
			open2() {
				this.show2 = true;
			},
			close2() {
				this.show2 = false;
			},
			confirmtime(e) {
				var Timestamp = e.value;
				this.suretime = SOtime.timestampToDate(Timestamp)
				this.show2 = false;
				uni.navigateTo({
					url: '/pagesA/detail/detail_order'
				})
				console.log(this.suretime)
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
		}
	}
</script>

<style>
	.zxc_centent {
		padding: 0 0 150upx 0;
	}

	.info_tp {
		padding: 30upx;
		background-color: #fff;
		border-radius: 40upx 40upx 0 0;
		margin-top: -30upx;
		z-index: 9;
		position: relative;
	}

	.info_tp_tit {
		font-weight: 700;
		font-size: 30upx;
	}

	.info_cen {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24upx;
		margin-top: 20upx;
	}

	.info_cen_left {
		display: flex;
		align-items: center;
		color: #999;
	}

	.money {
		font-size: 40upx;
		font-weight: 700;
		color: #ff6c00;
	}

	.time {
		display: flex;
		align-items: center;
		margin-left: 80upx;
	}

	.time_img {
		width: 30upx;
		margin-right: 10upx;
	}

	.info_bt {
		margin-top: 30upx;
	}

	.cai_img {
		width: 100%;
	}

	.box {
		margin-top: 30upx;
		padding: 30upx;
		background-color: #fff;
	}

	.label {
		font-weight: 700;
	}

	.ijc {
		margin-top: 20upx;
		font-size: 24upx;
		color: #999;
	}

	.ijc_right {
		color: #000;
		margin-left: 20upx;
	}

	.jv {
		position: fixed;
		bottom: 30upx;
		left: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99;
	}

	.jv_sm {
		background-color: #07c160;
		color: #fff;
		text-align: center;
		padding: 20upx 0;
		border-radius: 100upx;
		width: 92%;
	}

	.list {
		padding: 20upx;
		border-bottom: 1upx solid #ededed;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
	}

	.list_left {
		width: 25%;
	}

	.list_img {
		width: 130upx;
		height: 130upx;
		border-radius: 150upx;
	}

	.list_right {
		width: 72%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}

	.list_right_left {
		width: 100%;
		color: #999;
		font-size: 24upx;
	}

	.title {
		font-size: 30upx;
		font-weight: 700;
		color: #000;
	}

	.text {
		margin-top: 20upx;
		display: flex;
		align-items: center;
	}

	.list_right_right {
		background-color: #07c160;
		color: #fff;
		border-radius: 100upx;
		font-size: 24upx;
		white-space: nowrap;
		padding: 10upx 20upx;
		position: absolute;
		right: 0;
		z-index: 9;
	}

	.jishi_list {
		padding: 30upx;
		width: 80vw;
		height: 70vh;
		overflow-y: auto;
	}

	::v-deep .u-popup__content {
		border-radius: 10upx;
	}

	.tou_img {
		border-radius: 100upx;
	}

	.yue_time {
		color: #07c160;
		border: 2upx solid #07c160;
		padding: 10upx;
		font-size: 22upx;
		margin-left: 20upx;
	}

	.oks {
		display: flex;
		align-items: center;
	}

	.ikc {
		margin-left: 20upx;
	}

	.ujc {
		display: flex;
		align-items: center;
		margin-left: 20upx;
	}

	.jvb {
		width: 100%;
		text-align: center;
		background-color: #07c160;
		color: #fff;
		border-radius: 100upx;
		font-size: 24upx;
		white-space: nowrap;
		padding: 15upx 0;
	}
</style>